<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Cache-control" content="no-store">
    <meta http-equiv="Cache-Control" content="must-revalidate">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap 
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> -->
    <link href="{{ url_for('static',filename='bootstrap-3.3.7/css/bootstrap.min.css') }} " rel="stylesheet">
    

  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script> -->
    <script src="{{ url_for('static',filename='jquery.min.js') }}"></script>
    <script src="{{url_for('static',filename='bootstrap-3.3.7/js/bootstrap.min.js')}}"></script>

    <div class="container">
      <div class="jumbotron">
         <center>
        <!--  -->
    	 <img src="http://192.168.3.12:8080/?action=stream" style="width:100%" /> 
	  
         <!--
	 <img src="{{url_for('static',filename='my.jpg')  }}" style="width:70%" />
         -->
        </center>
      </div>
      <div class="row">
        <div class="col-md-4"></div>
        <div class="col-md-1"><button type="button" class="btn btn-primary btn-lg" id="left">left-button></div>
        <div class="col-md-1"><button type="button" class="btn btn-success btn-lg" id="up">up-button></div>
        <div class="col-md-1"><button type="button" class="btn btn-info btn-lg" id="down">down-button></div>
        <div class="col-md-1"><button type="button" class="btn btn-danger btn-lg" id="right">right-button></div>
        <div class="col-md-4"></div>
      </div>
      <div class="row">
        <div class="col-md-4"><button type="button" class="btn btn-danger btn-lg" id="stop">STOP(X)</button></div>
      </div>
    </div>


<script type="text/javascript">
  
  function sendSign(ori){
    $.get('./car?ctl='+ori);
  }

  $('#left').click(function(){sendSign('left');});
  $('#up').click(function(){sendSign('up');});
  $('#down').click(function(){sendSign('down');});
  $('#right').click(function(){sendSign('right');});
  $('#stop').click(function(){sendSign('stop');});

 if(window.DeviceOrientationEvent){
 //	window.addEventListener('deviceorientation',DeviceOrientationHandler,false);
 } else {
// 	alert(" --DeviceOrientantion  error!");
 }

var tmp=30;

function DeviceOrientationHandler(event){
	var alpha = event.alpha, beta = event.beta,gamma = event.gamma;
	
	if(alpha !=null || beta!=null|| gamma!=null){
		
		alert('alpha:'+alpha+'   beta:'+beta+'   gammer:'+gamma);
		if(gamma>50){
      sendSign('right');
      //alert('alpha:'+alpha+'   beta:'+beta+'   gammer:'+gamma);
		}
		if(gamma<-50){
		  sendSign('left');
     // alert('alpha:'+alpha+'   beta:'+beta+'   gammer:'+gamma);
		}
    
    if(beta>20){
       sendSign('down');
      }
    if(beta<-20){
      sendSign('up');
      }
	}else{
		alert('XXX');
	}
}

</script>
  </body>
</html>
